<template>
  <div id="mainline" style="width: 100%; height: 100%"></div>
</template>
<script setup name="EcharsLine">
import * as echarts from 'echarts'
import { reactive, toRefs, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const props = defineProps({
  lineObj: {
    type: Object,
    require: true
  }
})
const color = [
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#b2c095',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc',
  '#5470c6',
  '#5c22e4',
  '#cadb2c',
  '#2cb2db',
  '#5c38df',
  '#df9138',
  '#ff00ff',
  '#38dfdf',
  '#2270e4',
  '#30c92b',
  '#9438df',
  '#4082b9',
  '#40b950',
  '#eeeb59',
  '#ee9c59',
  '#f53a21',
  '#27eb27',
  '#217df5',
  '#f5214f',
  '#5a40b9',
  '#27ebeb',
  '#b221f5',
  '#38df62',
  '#b2df38',
  '#c7162e',
  '#24c716'
]
let mainline = null
const data = reactive({
  // 圆饼图配置信息
  option: {},
  // echarts绑定dom
  // mainline: null,
  // echarts所需数据
  echartsData: [],
  // 标题
  title: ''
})
let { option, echartsData, title } = toRefs(data)
watch(
  () => props.lineObj,
  () => {
    title.value = props.lineObj?.title
    echartsData.value = props.lineObj?.data
    proxy.$nextTick(() => {
      echartsDraw()
    })
  },
  {
    deep: true,
    immediate: true
  }
)
function echartsDraw() {
  if (mainline != null && mainline != '' && mainline != undefined) {
    mainline.dispose() // 销毁
  }
  mainline = echarts.init(document.getElementById('mainline'))
  option.value = {}
  option.value = {
    title: {
      show: false,
      text: title.value
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      orient: 'horizontal',
      bottom: '0'
    },
    grid: {
      left: '2%',
      right: '3%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data:
          echartsData.value && echartsData.value.length > 0
            ? echartsData.value.map(e => e.name)
            : []
      }
    ],
    yAxis: [
      {
        type: 'value',
        minInterval: 1
      }
    ],
    series: [
      {
        name: title.value,
        type: 'line',
        areaStyle: {
          color: 'rgba(158, 202, 255, 0.6)'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{c}'
        },
        // label: {
        //   show: true,
        //   position: 'top'
        // },
        emphasis: {
          focus: 'series'
        },
        data:
          echartsData.value && echartsData.value.length > 0
            ? echartsData.value.map(e => e.value)
            : []
      }
    ]
  }
  mainline.setOption({ ...option.value, ...props.lineObj?.option })
}
</script>
<style lang="scss" scoped></style>

<style scoped></style>
